<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-header-wrap">
            <a-page-header @back="handleBack">
                <template #subTitle>
                    <span style="color: #000">{{ detailData.summary }}</span>
                </template>
                <template #tags>
                    <a-tag color="green" v-if="detailData.status === '已完成'">
                        {{ detailData.status }}
                    </a-tag>
                    <a-tag color="blue" v-if="detailData.status === '进行中'">
                        {{ detailData.status }}
                    </a-tag>
                    <a-tag color="default" v-if="detailData.status === '待办'">
                        {{ detailData.status }}
                    </a-tag>
                </template>
                <div style="width: calc(100% - 130px)">
                    <a-form layout="inline">
                        <a-row>
                            <a-col :span="4">
                                <a-form-item label="所属版本" :span="24">
                                    <span>{{ detailData.versionName }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="所属冲刺" :span="24">
                                    <span>{{ detailData.sprint }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="上线日期" :span="24">
                                    <span>{{ detailData.onlineTime ? $moment(detailData.onlineTime).format('YYYY-MM-DD') : '' }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="负责人" :span="24">
                                    <span>{{ detailData.assigneeName }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-page-header>
            <img src="@/assets/images/badge-track.png" style="width: 130px; height: 100%; position: absolute; top: 0px; right: 0" />
            <div
                style="
                    width: 130px;
                    height: 100%;
                    position: absolute;
                    top: 0px;
                    right: 0;
                    display: flex;
                    align-items: center;
                    padding-left: 50px;
                    color: #fff;
                "
            >
                <div>需求跟踪</div>
            </div>
        </div>

        <div style="background: #fff; width: 100%">
            <a-row>
                <a-col :span="14">
                    <h-section title="需求追溯图" collapse v-if="detailData.id"> <data-tree :detail="detailData" /> </h-section>
                </a-col>
                <a-col :span="10">
                    <h-section title="需求时间轴" collapse v-if="detailData.id">
                        <time-line :detail="detailData" />
                    </h-section>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import { HStatusTag } from '@/components';
import TimeLine from './components/Timeline.vue';
import DataTree from './components/DataTree.vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HStatusTag,
        TimeLine,
        DataTree
    },
    setup() {
        const { route, router, handleBack } = useRouterApi({
            backQuery: {
                path: 'energyManage/jiraTrack'
            }
        });
        const state = reactive<any>({
            detailData: {},
            dataObj: {},
            loading: false
        });
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: route.query.id
            };
            const { success, moule } = await api.jiraIssueTrackModel.findById(query);
            if (success) {
                state.detailData = { ...moule };
            }
            state.loading = false;
        };
        const init = () => {
            getDetailData();
        };
        init();
        return {
            ...toRefs(state),
            handleBack
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-header-wrap {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3094e9;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .extra-wrap {
            position: absolute;
            right: 40px;
            bottom: 22px;
            color: #000;
            cursor: pointer;
        }
    }
}
.section-wrap {
    padding: 0;
}
// // 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
::v-deep(.zoom-container) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>